<template>
    <el-card>
        <div slot="header" class="clearfix">
        <span>
            权限管理
        </span>
    </div>
    
    
        
    
    <div>
        <el-table :data="fillterAndPageData" style="width: 100%">
            <el-table-column prop="id" label="id" width="120"></el-table-column>
            <el-table-column prop="userName" label="姓名" width="120"></el-table-column>
            <el-table-column prop="password" label="密码" width="120"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="120"></el-table-column>
            <el-table-column prop="phonenumber" label="手机号" width="130"></el-table-column>
            <el-table-column prop="name" label="角色" width="120"
            >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.name === '超级管理员' ?  'primary':'success' "
          disable-transitions>{{scope.row.name}}</el-tag>
         
      </template>
        </el-table-column>
           
            <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success"  @click="bianji(scope.row.id,scope.row.userName,scope.row.password,scope.row.email,scope.row.phonenumber,scope.row.name)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleEdit(scope.row.id)">删除</el-button>
                        
                        
                    </template>
                    
                </el-table-column>
        </el-table>
        
    <el-pagination
     
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[5,8,10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  
    </div>
    <el-dialog title="人员信息" :visible.sync="dialogFormVisible"  style="width:1000px">
        <el-form :model="form">
                        <el-form-item  :label-width="formLabelWidth">
                            <el-input v-model="username" autocomplete="off"  placeholder="用户名" ></el-input>
                        </el-form-item>
                        <el-form-item :label-width="formLabelWidth">
                            <el-input v-model="password" autocomplete="off" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item  :label-width="formLabelWidth">
                            <el-input v-model="email" autocomplete="off"  placeholder="邮箱"></el-input>
                        </el-form-item>
                        <el-form-item  :label-width="formLabelWidth">
                            <el-input v-model="phonenumber" autocomplete="off"  placeholder="电话"></el-input>
                        </el-form-item>
                       
                            <el-select v-model="name" style="width:460px"  >
      
      <el-option label="超级管理员" value="超级管理员" ></el-option>
      <el-option label="普通用户" value="普通用户"></el-option>
      </el-select>
                      
                    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </div>
</el-dialog>    
    </el-card>
</template>

<script>
    export default{
        data(){
            return {
            fillterAndPageData: [],
            dialogFormVisible: false,
            pageSize:'',
            pageNumber:'',
            total:'',
            username: '',
            password: '',
            email:'',
            phonenumber:'',
            name:'',
            id:'',
           
            
    }
},
    created(){
         this.query() 
        },
    methods: {
        handleCurrentChange(pageNumber) {
      
      this.pageNumber=pageNumber;
      console.log(pageNumber);
      this.query()
     
      
    },
    handleSizeChange(pageSize) {
     
      this.pageSize=pageSize;
      console.log(pageSize);
      this.query()
      
    },
        query(){
            fetch("http://1.15.134.100:9999/user/role?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize,{
                method:"GET",
                headers:{
                    'token': localStorage.getItem('token'),
                },
            }
            )
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
              this.total=  res.data.total

            })
        },
        handleEdit(id){
            fetch("http://1.15.134.100:9999/user/delete?id="+id,{
                method:"delete",
                headers:{
                    'token': localStorage.getItem('token'),
                },
               }).then((response)=> response.json())
               .then((data)=>{
                console.log(data);
                alert("删除成功");
                this.$router.go(0);
               });
        },
        bianji(id,userName,password,email,phonenumber,name){
            this.username=userName;
            this.password=password;
            this.email=email;
            this.phonenumber=phonenumber;
            this.name=name;
            this.id=id;
            this.dialogFormVisible=true;
        },
        queding(){
             
              this.$confirm('确定修改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => { 
            
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
         
          this.xiugai();
          this.$router.go(0);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          }); 
          this.dialogFormVisible=false;         
        });

        },
        xiugai(){
            fetch("http://1.15.134.100:9999/users?id="+this.id+"&username="+this.username+"&password="+this.password+"&email="+this.email+"&phonenumber="+this.phonenumber+"&rolename="+this.name,{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                    'token': localStorage.getItem('token'),
                   
                
                },
              
            
        }).then(response => response.json())
                .then(data => {
                    console.log(data);
                    
                });
        },
    }
}
    </script>

    <style>
        .clearfix {
    display: flex;
   

}

.el-form{
    margin-bottom: 0px;
}
.el-pagination{
    margin-left: 850px;
}
.el-dialog{
    margin-left: 500px;
    margin-top: 200px;
}

    </style>